<template>
    <label
        class="jk-radio"
        :class="[]"
        @tap="handleChange">
        <span
            class="jk-radio__input"
            :class="[{'is-checked': isChecked},{'is-disabled':disabled}]">
            <span class="jk-radio__inner"></span>
            <input :value="label" :name="names" type="radio" tabIndex="-1" hidden @change="handleChange">
        </span>
        
        <span v-if="$slots.default" class="jk-radio__label">
            <slot></slot>
        </span>
    </label>
</template>

<script>
export default {
    name: 'Radio',
    model: {
        props: 'value',
        event: 'change'
    },
    componentName: 'jkRadio',
    props: {
        value: {
            type: [Number, String],
        },
        label: {
            type: [String, Number],
        },
        disabled: {
            type: Boolean,
            default: false
        },
        name: String
    },
    data(){
        return {
            curValue: ''
        }
    },
    mounted() {
    	this.init();
    },
    methods: {
        init(){
            const parent = this.$parent;
            const flag = parent.$options.name === 'RadioGroup'
            if(flag){
                this.curValue = parent.value;
            }else{
                this.curValue = this.value;
            }
        },
        handleChange(ev){
            if(this.disabled){
                return;
            }
            const parent = this.$parent;
            const flag = parent.$options.name === 'RadioGroup'
            if(flag){
                parent.curValue = this.label;
                parent.$emit('change', parent.curValue)
            }else{
                this.curValue = this.curValue =  this.label;
                this.$emit('change', this.curValue)
            }
        },
    },
    computed: {
        isChecked(){
            let bool = false;
            const parent = this.$parent;
            const flag = parent.$options.name === 'RadioGroup'
            if(flag){
                bool = parent.curValue == this.label
            }else{
                bool = this.curValue == this.label;
            }
            
            return bool;
        },
        names(){
            const parent = this.$parent;
            const flag = parent.$options.name === 'RadioGroup'
            if(flag){
                return this.name || parent.value;
            }else{
                return this.name || this.curValue
            }
        }
    },
    watch: {
        value(val, val1){
            this.curValue = val;
        }
    }
}
</script>

<style lang="scss">
.jk-radio{
    color: #606266;
    font-weight: 500;
    line-height: 1;
    position: relative;
    cursor: pointer;
    display: inline-block;
    white-space: nowrap;
    outline: none;
    font-size: 28upx;
    user-select: none;
    &+&{
        margin-left: 60upx;
    }
    &__input{
        white-space: nowrap;
        cursor: pointer;
        outline: none;
        display: inline-block;
        line-height: 1;
        position: relative;
        vertical-align: middle;
    }
    &__inner{
        border: 1px solid #dcdfe6;
        border-radius: 100%;
        width: 28upx;
        height: 28upx;
        background-color: #fff;
        position: relative;
        cursor: pointer;
        display: inline-block;
        box-sizing: border-box;
        &:after{
            width: 8upx;
            height: 8upx;
            border-radius: 100%;
            background-color: #fff;
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%) scale(0);
            transition: transform .15s ease-in;
        }
    }
    &__input.is-checked{
        +.jk-radio__label{
            color: $uni-color-primary;
        }
        .jk-radio__inner{
            border-color: $uni-color-primary;
            background: $uni-color-primary;
            &:after{
                transform: translate(-50%,-50%) scale(1);
            }
        }
    }
    &__input.is-disabled{
        +.jk-radio__label{
            color: #c0c4cc;
            cursor: not-allowed;
        }
        .jk-radio__inner{
            background-color: #f5f7fa;
            border-color: #e4e7ed;
            cursor: not-allowed;
            &:after{
                cursor: not-allowed;
                background-color: #f5f7fa;
            }
        }
    }
    &__input.is-checked.is-disabled{
        .jk-radio__inner{
            background-color: #f5f7fa;
            border-color: #e4e7ed;
            &:after{
                background-color: #c0c4cc;
            }
        }
    }
    &__label{
        font-size: 28upx;
        padding-left: 20upx;
    }
}
</style>